<template>
  <div class="header-container">
    <div class="header-left">
      <div class="title">智能路灯</div>
    </div>
    <div class="header-right">
      <el-button type="primary" size="small" plain circle @click="dialogFormVisible = true">
        <el-icon><Setting /></el-icon>
      </el-button>
      <el-button type="success" size="small" plain :disabled="mqttStore.connected" @click="mqttStore.connect">连接</el-button>
      <el-button type="warning" size="small" plain :disabled="!mqttStore.connected" @click="mqttStore.disconnect"
        >断开连接</el-button
      >
      <el-switch
        v-model="isDark"
        inline-prompt
        @change="() => useToggle(isDark)"
        style="--el-switch-on-color: #4c4d4f"
      >
        <template #active-action>
          <el-icon><Moon /></el-icon>
        </template>
        <template #inactive-action>
          <el-icon color="#040404"><Sunny /></el-icon>
        </template>
      </el-switch>
    </div>
  </div>

  <el-dialog
    v-model="dialogFormVisible"
    title="设置用户名密码"
    width="350"
    align-center
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form :model="form" :rules="formRules" ref="ruleFormRef">
      <el-form-item label="用户名" label-width="65px" prop="username">
        <el-input v-model="form.username" autocomplete="off" placeholder="请输入用户名" clearable />
      </el-form-item>
      <el-form-item label="密码" label-width="65px" prop="password">
        <el-input
          v-model="form.password"
          autocomplete="off"
          type="password"
          placeholder="请输入密码"
          clearable
          show-password
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelDialogl">取消</el-button>
        <el-button type="primary" @click="confirmDialog(ruleFormRef)"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import useStore from "@/store";
import { ref, reactive } from "vue";
import { useDark, useToggle } from "@vueuse/core";
import { Moon, Sunny } from "@element-plus/icons-vue";

const isDark = useDark();

const { mqttStore } = useStore();

const dialogFormVisible = ref(false);
const form = ref({
  username: "",
  password: ""
});
const ruleFormRef = ref();
const formRules = reactive({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
});

const cancelDialogl = () => {
  dialogFormVisible.value = false;
  form.value.username = "";
  form.value.password = "";
};

const confirmDialog = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      mqttStore.setUsernamePassword(form.value.username, form.value.password);
      dialogFormVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="less" scoped>
.header-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-left {
    .title {
      font-size: 24px;
      font-weight: 600;
      color: #49f;
    }
  }

  .header-right {
    .el-switch {
      margin-left: 12px;
      caret-color: transparent;
    }
  }
}
</style>
